<template>
  <div class="p-6">
    <el-card>
      <template #header>
        <span class="text-lg font-bold">发布种子</span>
      </template>

      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="120px"
        label-position="top"
      >
        <el-form-item label="种子标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入标题" />
        </el-form-item>

        <el-form-item label="分类" prop="category">
          <el-select v-model="form.category" placeholder="请选择分类">
            <el-option label="电影" value="电影" />
            <el-option label="软件" value="软件" />
            <el-option label="操作系统" value="操作系统" />
            <el-option label="其他" value="其他" />
          </el-select>
        </el-form-item>

        <el-form-item label="描述" prop="description">
          <el-input
            v-model="form.description"
            type="textarea"
            :rows="5"
            placeholder="请输入种子简介"
          />
        </el-form-item>

        <el-form-item label="上传方式" prop="uploadMethod">
          <el-radio-group v-model="form.uploadMethod">
            <el-radio-button label="文件上传" />
            <el-radio-button label="磁力链接" />
          </el-radio-group>
        </el-form-item>

        <el-form-item v-if="form.uploadMethod === '文件上传'" label="种子文件" prop="file">
          <el-upload
            class="upload-demo"
            drag
            action="#"
            :before-upload="beforeUpload"
            :on-change="handleFileChange"
            :show-file-list="true"
          >
            <i class="el-icon-upload" />
            <div class="el-upload__text">拖拽或点击上传.torrent文件</div>
          </el-upload>
        </el-form-item>

        <el-form-item v-if="form.uploadMethod === '磁力链接'" label="磁力链接" prop="magnet">
          <el-input v-model="form.magnet" placeholder="请输入magnet链接" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
// import { publishSeed } from '@/api/torrent';

const formRef = ref(null);

const form = reactive({
  title: '',
  category: '',
  description: '',
  uploadMethod: '文件上传',
  file: null,
  magnet: ''
});

const rules = {
  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  category: [{ required: true, message: '请选择分类', trigger: 'change' }],
  description: [{ required: true, message: '请输入描述', trigger: 'blur' }],
  file: [
    {
      required: true,
      message: '请上传文件',
      trigger: 'change',
      validator: (rule, value, callback) => {
        if (form.uploadMethod === '文件上传' && !form.file) {
          callback(new Error('请上传.torrent文件'));
        } else {
          callback();
        }
      }
    }
  ],
  magnet: [
    {
      required: true,
      message: '请输入磁力链接',
      trigger: 'blur',
      validator: (rule, value, callback) => {
        if (form.uploadMethod === '磁力链接' && !value) {
          callback(new Error('磁力链接不能为空'));
        } else {
          callback();
        }
      }
    }
  ]
};

const beforeUpload = (file) => {
  const isTorrent = file.name.endsWith('.torrent');
  if (!isTorrent) {
    ElMessage.error('只能上传 .torrent 文件');
  }
  return isTorrent;
};

const handleFileChange = (file) => {
  form.file = file.raw;
};

const submitForm = () => {
  formRef.value.validate(async (valid) => {
    if (!valid) return;

    const formData = new FormData();
    formData.append('title', form.title);
    formData.append('category', form.category);
    formData.append('description', form.description);

    if (form.uploadMethod === '文件上传') {
      formData.append('file', form.file);
    } else {
      formData.append('magnet', form.magnet);
    }

    // const res = await publishSeed(formData);
    // 模拟提交成功
    ElMessage.success('种子发布成功！');
    resetForm();
  });
};

const resetForm = () => {
  formRef.value.resetFields();
  form.file = null;
};
</script>
